<template>
  <!-- <div
    ref="rootRef"
    class="suggest"
    v-loading:[loadingText]="loading"
    v-no-result:[noResultText]="noResult"
  > -->
  <van-list
    v-model:loading="loading"
    @load="onLoad"
    :finished="!hasMore"
    finished-text="没有更多啦!"
    offset="200"
    loading-text="努力加载中..."
    :immediate-check="false"
  >
    <div class="suggest">
      <ul class="suggest-list">
        <li class="suggest-item" v-if="singer" @click="selectSinger(singer)">
          <!-- <div class="icon">
          <i class="icon-mine"></i>
        </div> -->
          <van-image width="60" height="60" :src="singer.pic" round />
          <div class="name" style="margin-left:20px;">
            <p class="text">{{ singer.name }}</p>
          </div>
        </li>
        <li
          class="suggest-item"
          v-for="song in songs"
          :key="song.id"
          @click="selectSong(song)"
        >
          <div class="icon">
            <i class="icon-music"></i>
          </div>
          <div class="name">
            <p class="text">{{ song.singer }}-{{ song.name }}</p>
          </div>
        </li>
        <!-- <div class="suggest-item" v-loading:[loadingText]="pullUpLoading"></div> -->
        <div class="suggest-item"></div>
      </ul>
    </div>
  </van-list>
</template>

<script>
import { ref, watch, computed, nextTick } from 'vue'
import { search } from '@/service/search'
import { processSongs } from '@/service/song'
// import usePullUpLoad from './use-pull-up-load'

export default {
  name: 'suggest',
  props: {
    query: String,
    showSinger: {
      type: Boolean,
      default: true
    }
  },
  emits: ['select-song', 'select-singer'],
  setup(props, { emit }) {
    const singer = ref(null)
    const songs = ref([])
    const hasMore = ref(true)
    const page = ref(1)
    const loadingText = ref('')
    const noResultText = ref('抱歉，暂无搜索结果')
    const loading = ref(false)

    const noResult = computed(() => {
      return !singer.value && !songs.value.length && !hasMore.value
    })

    watch(
      () => props.query,
      async (newQuery, oldVal) => {
        if (!newQuery) {
          return
        }
        if (newQuery.trim() !== oldVal.trim()) {
          await searchFirst()
        }
      }
    )

    async function searchFirst() {
      if (!props.query) {
        return
      }
      page.value = 1
      songs.value = []
      singer.value = null
      hasMore.value = true

      await nextTick()
      await getSearchList()
    }

    const getSearchList = async () => {
      const result = await search(props.query, page.value, props.showSinger)
      const songsList = await processSongs(result.songs)
      songs.value = songs.value.concat(songsList)
      singer.value = result.singer
      hasMore.value = result.hasMore
      console.log('songs', songs.value)
      console.log('singer', singer.value)
      await nextTick()
      loading.value = false
    }

    function selectSong(song) {
      emit('select-song', song)
    }

    function selectSinger(singer) {
      emit('select-singer', singer)
    }

    async function onLoad() {
      if (!hasMore.value) return
      loading.value = true
      console.log(loading.value)
      page.value = 1 + page.value
      await nextTick()
      await getSearchList()
    }

    return {
      hasMore,
      onLoad,
      singer,
      songs,
      loadingText,
      noResultText,
      loading,
      noResult,
      // pullUpLoading,
      selectSong,
      selectSinger
      // pullUpLoad
      // rootRef
    }
  }
}
</script>

<style lang="scss" scoped>
.suggest {
  height: 100%;
  overflow: hidden;
  .suggest-list {
    padding: 0 30px;
    .suggest-item {
      display: flex;
      align-items: center;
      padding-bottom: 20px;
      .icon {
        flex: 0 0 30px;
        width: 30px;
        [class^='icon-'] {
          font-size: 14px;
          color: $color-text-d;
        }
      }
      .name {
        // margin-left: 8px;
        flex: 1;
        font-size: $font-size-medium;
        color: $color-text-d;
        overflow: hidden;
        .text {
          @include no-wrap();
        }
      }
    }
  }
}
</style>
